<template>
<div class="div">
    <div class="head">
      <div></div>
      <div>我的</div>
      <span>设置</span>
    </div>
    <div class="content">
      <div class="info">
            <img src="https://img2.baidu.com/it/u=2090606195,1473750087&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""><samp>{{name}}</samp>
      </div>
      <div class="favourable">
          <div>0.00<br>已节省·元</div>
          <div>0<br>优惠劵</div>
          <div>0<br>收藏</div>
      </div>
      <div class="order">
          <div class="form">
              <div>我的订单</div>
              <div>查看全部></div>
          </div>
          <hr>
          <div class="ico">
              <div>
                  <img src="../../images/daifukuan.png" alt="">
                  <br>
                  待付款
              </div>
              <div>
                  <img src="../../images/daifahuo.png" alt="">
                  <br>
                  待发货
              </div>
              <div>
                  <img src="../../images/daisouhuo.png" alt="">
                  <br>
                  待收获
              </div>
              
              <div>
                   <img src="../../images/daipingjia.png" alt="">
                  <br>
                  评价
              </div>
              <div>
                  <img src="../../images/tuikuan.png" alt="">
                  <br>
                  退款/售后
              </div>
          </div>
      </div>
      <div class="order">
          <div>常用工具</div>
          <hr>
          <div class="ico">
            <div class="chart">
                <img src="../../images/zhanghuyue.png" alt="">
                <br>
                账户
            </div>
            <div class="chart">
                <img src="../../images/line-profitshouyi.png" alt="">
                <br>
               收益管理
            </div>
           
            <div class="chart">
                <img src="../../images/vip.png" alt="">
                <br>
                我的VIP
            </div>
            <div class="chart">
                <img src="../../images/dianzhang.png" alt="">
                <br>
                店长推荐
            </div>
             <div class="chart">
                <img src="../../images/shouye.png" alt="">
                <br>
                联系
            </div>
            <div class="chart">
                <img src="../../images/yaoqinghaoyou.png" alt="">
                <br>
                邀请好友
            </div>
            <div class="chart">
                <img src="../../images/sucai.png" alt="">
                <br>
                素材中心
            </div>
            <div class="chart">
                <img src="../../images/chuangyefuwu.png" alt="">
                <br>
                创业营
            </div>

          </div>
      </div>
      <div class="order">
          <div>我的服务</div>
          <hr>
          <div class="ico">
              <div>
                <img src="../../images/jifen.png" alt="">
                <br>
                积分
            </div>
            <div>
                <img src="../../images/shouhuodizhi.png" alt="">
                <br>
                收货地址
            </div>
            <div>
                <img src="../../images/zaixiankefu.png" alt="">
                <br>
                在线客服
            </div>
            <div>
                <img src="../../images/tousu.png" alt="">
                <br>
                投诉
            </div>
            <div>
                <img src="../../images/bangzhu.png" alt="">
                <br>
                帮助
            </div>
            

          </div>
      </div>
    </div>
    <subscript></subscript>
    </div>
</template>
<script>
export default {
    data() {
        return {
            name:`${this.$store.getters["welfareah/getUserinfo"].name} `
        }
    },
    created() {
        console.log(this.$store.getters["welfareah/getUserinfo"]);
    },
}
</script>
<style lang="less" scoped>
.div {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
 .head {
    padding: 0 20px;
    background: rgb(252, 46, 9);
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    color: #fff;
  }
  .content{
      flex: 1;
      overflow-y: auto;
      background: #f2f2f2;
     
      .info{
           line-height: 100px;
          background: rgb(252, 46, 9);
          color: #fff;
           img{
               margin: 10px 30px;
               width: 80px;
               height: 80px;
                border-radius: 40px;
                 vertical-align: middle;
           }
           samp{
              font-size: 25px;
              vertical-align: middle;
           }
      }
      .favourable{
            border: none;
            display: flex;
            flex-direction: row;
            background: rgb(252, 46, 9);
            color: #fff;
            justify-content: space-around;
            div{
                text-align: center;
            }
      }
      .order{
          margin: 15px;
          padding: 20px;
          background: #fff;
           border-radius: 10px;
          .form{
              display: flex;
              flex-direction: row;
              justify-content:space-between;
          }
          .ico{
               display: flex;
              flex-direction: row;
              justify-content: space-around;
              flex-wrap: wrap;
              div{
                  width: 20%;
                  text-align: center;
                  font-size: 14px;
                  img{
                      width: 30px;;
                  }
              }
              .chart{
                  width: 25%;
                  margin: 10px 0;
              }
              }
      }
      
  }
}
</style>